<template>
  <div class="gridBox">
    <div class="chartBox">
      <h4>{{ getTypeLabel("1") }}</h4>
      <dashboard :data="pvData"></dashboard>
    </div>
    <div class="chartBox">
      <h4>{{ getTypeLabel("2") }}</h4>
      <dashboard :data="windData"></dashboard>
    </div>
    <div class="chartBox">
      <h4>{{ getTypeLabel("3") }}</h4>
      <dashboard :data="energyData"></dashboard>
    </div>
    <div class="chartBox">
      <h4>{{ getTypeLabel("4") }}</h4>
      <dashboard :data="userData"></dashboard>
    </div>
  </div>
</template>
<script>
import dashboard from "./dashboard.vue";
import request from "@/utils/request";
export default {
  components: {
    dashboard,
  },
  data() {
    return {
      pvData: {},
      windData: {},
      energyData: {},
      userData: {},
      substationTypeOptions: [],
    };
  },
  mounted() {
    this.initData();

    this.getDicts("substation_type").then((response) => {
      this.substationTypeOptions = response.data;
    });
  },
  methods: {
    getTypeLabel(type) {
      const found = this.substationTypeOptions.find(
        (item) => item.dictValue === String(type)
      );
      return found ? found.dictLabel : "未知";
    },
    initData() {
      request({
        url: "/zk/substation/type-stat",
        method: "get",
      }).then((res) => {
        if (res.code === 200) {
          let arr = res.data || [];
          this.pvData = arr.find((f) => f.type == "1") || {};
          this.windData = arr.find((f) => f.type == "2") || {};
          this.energyData = arr.find((f) => f.type == "3") || {};
          this.userData = arr.find((f) => f.type == "4") || {};
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.chartBox {
  width: 100%;
  border: 1px solid rgba(7, 118, 181, 0.5);
  box-shadow: inset 0 0 10px rgba(7, 118, 181, 0.4);
}

.gridBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  h4 {
    padding: 10px 10px 10px 25px;
    border-bottom: 1px solid rgba(7, 118, 181, 0.7);
    position: relative;
    color: #3dcffa;
    margin: 0;

    &::before {
      position: absolute;
      content: "";
      width: 6px;
      height: 6px;
      background: rgba(22, 214, 255, 0.9);
      box-shadow: 0 0 5px rgba(22, 214, 255, 0.9);
      border-radius: 10px;
      left: 10px;
      top: 15px;
    }

    &::after {
      width: 100%;
      height: 1px;
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      background: linear-gradient(to right, #076ead, #4ba6e0, #076ead);
      box-shadow: 0 0 5px rgba(131, 189, 227, 1);
      opacity: 0.6;
    }
  }
}
</style>
